Ext.require([
    'Ext.form.*',
    'Ext.layout.container.Column',
    'Ext.tab.Panel'
]);
Ext.require('*');
//Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
//Ext.require(['Ext.data.*']);


 generateData = function(n, floor){
				
        var data = [],
            p = (Math.random() *  11) + 1,
            i;
            
        floor = (!floor && floor !== 0)? 20 : floor;
        
        for (i = 0; i < (n || 12); i++) {
            data.push({
                name: Ext.Date.monthNames[i % 12],
                data1: Math.floor(Math.max((Math.random() * 100), floor)),
                data2: Math.floor(Math.max((Math.random() * 100), floor)),
                data3: Math.floor(Math.max((Math.random() * 100), floor)),
                data4: Math.floor(Math.max((Math.random() * 100), floor)),
                data5: Math.floor(Math.max((Math.random() * 100), floor)),
                data6: Math.floor(Math.max((Math.random() * 100), floor)),
                data7: Math.floor(Math.max((Math.random() * 100), floor))
            });
        }
        return data;
    };




Ext.onReady(function(){

    Ext.QuickTips.init();


Ext.define('TestModel', {
    extend: 'Ext.data.Model',
    fields: ['pulso1','pulso2', 'pulso3' ,'tiempo']
});


var store = Ext.create('Ext.data.Store', {
    model: 'TestModel',
    data: [
        { pulso1: 5.8, pulso2: 2.8, pulso3: 4.4, tiempo: new Date(2011, 1, 1, 8) },
        { pulso1: 6.3, pulso2: 4.8, pulso3: 3.8, tiempo: new Date(2011, 1, 1, 9) },
        { pulso1: 7.3, pulso2: 2.3, pulso3: 6.8, tiempo: new Date(2011, 1, 1, 10) },
        { pulso1: 7.8, pulso2: 5.0, pulso3: 9.8, tiempo: new Date(2011, 1, 1, 11) },
        { pulso1: 8.1, pulso2: 8.1, pulso3: 2.8, tiempo: new Date(2011, 1, 1, 12) }
    ]
});


	var  chartRitmoCardiaco	= Ext.create('Ext.chart.Chart', {
   renderTo: Ext.getBody(),
   width: 400,
   height: 300,
   store: store,  
   theme: 'Category1',
   legend: {
       position: 'right'
   },
   animate:'true',
   shadow: true,
   axes: [
        {
            title: 'Pulso',
            type: 'Numeric',
            position: 'left',
            fields: ['pulso1','pulso2'],
            minimum: 0,
            maximum: 10,
            grid: {
                odd: {
                    opacity: 0.8,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 0.5
                }
            }
        },
        {
            title: 'Tiempo',
            type: 'Time',
            position: 'bottom',
            fields: ['tiempo'],
            groupBy: 'hour',
            dateFormat: 'h:m:s'
        }
    ],
     series: [
        {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            xField: 'tiempo',
            yField: 'pulso1',
            smooth: true,
            fill: true,
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
            style: {
                    opacity: 0.53
                }
        },{
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
            xField: 'tiempo',
            yField: 'pulso2',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
            fill: true,
            xField: 'tiempo',
            yField: 'pulso3',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        }
    ]
});
	
	var panelZoomChart =  Ext.create('Ext.form.Panel', {
        width: 420,
        height: 120,
        title: 'Zoom',
        bodyPadding: 10,
        defaultType: 'sliderfield',
        defaults: {
            anchor: '95%',
            tipText: function(thumb){
                return String(thumb.value) + '%';
            } 
        },
        items: [{
            fieldLabel: 'Tiempo',
            value: 50,
            name: 'xlabel'
        }],dockedItems: {
            xtype: 'toolbar',
            dock: 'bottom',
            ui: 'footer',
            items: [{
                text: 'Aplicar',
                
                handler: function(){
                    this.up('form').items.each(function(c){
                        c.setValue(100);
                    });
                }
            }]
        }
        
         /*,
        dockedItems: {
            xtype: 'toolbar',
            dock: 'bottom',
            ui: 'footer',
            items: [{
                text: 'Max All',
                handler: function(){
                    this.up('form').items.each(function(c){
                        c.setValue(100);
                    });
                }
            }, '->', {
                text: 'Save',
                handler: function(){
                    var values = this.up('form').getForm().getValues(),
                        s = ['Sounds Effects: <b>{0}%</b>',
                            'Ambient Sounds: <b>{1}%</b>',
                            'Interface Sounds: <b>{2}%</b>'];
                    
                    Ext.Msg.alert({
                        title: 'Settings Saved',
                        msg: Ext.String.format(s.join('<br />'), values.fx, values.ambient, values.iface),
                        icon: Ext.Msg.INFO,
                        buttons: Ext.Msg.OK
                    }); 
                }
            },{
                text: 'Reset',
                handler: function(){
                    this.up('form').getForm().reset();
                }
            }]
        }*/
    });
	
var panelRitmoCardiaco = Ext.create('Ext.form.Panel', {
        bodyStyle:'padding:5px',
        width: 405,
        fieldDefaults: {
            labelAlign: 'top',
            msgTarget: 'side'
        },
        defaults: {
            anchor: '100%'
        },
        items: [{
            layout:'column',
            border:false,
                items: [chartRitmoCardiaco,panelZoomChart ]
            }]
    });


    Ext.define("Post", {
        extend: 'Ext.data.Model',
        proxy: {
            type: 'jsonp',
            url : 'http://www.sencha.com/forum/topics-remote.php',
            reader: {
                type: 'json',
                root: 'topics',
                totalProperty: 'totalCount'
            }
        },

        fields: [
            {name: 'id', mapping: 'post_id'},
            {name: 'title', mapping: 'topic_title'},
            {name: 'topicId', mapping: 'topic_id'},
            {name: 'author', mapping: 'author'},
            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
            {name: 'excerpt', mapping: 'post_text'}
        ]
    });

    ds = Ext.create('Ext.data.Store', {
        pageSize: 10,
        model: 'Post'
    });

var something='Holas';





var panelBuscarPaciente =  Ext.create('Ext.form.Panel', {
        title: 'Busqueda de paciente',
        bodyStyle:'padding:5px',
        width: 800,
        fieldDefaults: {
            labelAlign: 'top',
            msgTarget: 'side'
        },
        defaults: {
            anchor: '100%'
        },
        items: [{
            layout:'column',
            border:false,
                items: [{
                						xtype: 'label',
										        forId: 'lblPaciente',
										        text: 'Buscar paciente: ',
										        margins: '0 0 0 10'
                					 },{
				                    xtype: 'combo',
				                    store: ds,
				                    displayField: 'Buscar',
				                    typeAhead: false,
				                    hideTrigger:true,
				                    labelWidth : 130,
				                     width: 280,
				                    anchor: '90%',
				
				                    listConfig: {
				                      loadingText: 'Buscando...',
				                      emptyText: 'No se encontraron pacientes registrados.',
				
				                      getInnerTpl: function() {
				                       return '<a class="search-item" href="http://www.sencha.com/forum/showthread.php?t={topicId}&p={id}">' +
				                           '<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +
				                           '{excerpt}' +
				                          '</a>';
				                      }
				                    },
				                    pageSize: 10
				                   }]
            }]
    });


 
    var datosPaciente= Ext.create('Ext.form.Panel', {
        title: 'Pantalla Especialista',
        bodyStyle:'padding:5px',
        width: 800,
        fieldDefaults: {
            labelAlign: 'top',
            msgTarget: 'side'
        },
        defaults: {
            anchor: '100%'
        },
        items: [{
            xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            height:235,
            defaults:{bodyStyle:'padding:10px'},
            items:[{
			                title:'Datos personales',
			                defaults: {width: 230},
			                defaultType: 'textfield',
			
			                items: [{
								                    fieldLabel: '',
								                    name: 'first',
								                    allowBlank:false,
								                    value: 'Jamie'
								                },{
								                    fieldLabel: 'Last Name',
								                    name: 'last',
								                    value: 'Avins'
								                },{
								                    fieldLabel: 'Company',
								                    name: 'company',
								                    value: 'Ext JS'
								                }, {
								                    fieldLabel: 'Email',
								                    name: 'email',
								                    vtype:'email'
								                }]
			            },{
			                title:'Datos familiares',
			                defaults: {width: 230},
			                defaultType: 'textfield',
			
			                items: [{
								                    fieldLabel: 'Home',
								                    name: 'home',
								                    value: '(888) 555-1212'
								                },{
								                    fieldLabel: 'Business',
								                    name: 'business'
								                },{
								                    fieldLabel: 'Mobile',
								                    name: 'mobile'
								                },{
								                    fieldLabel: 'Fax',
								                    name: 'fax'
								                }]
			            },{
			                cls: 'x-plain',
			                title: 'Mensaje al paciente',
			                layout: 'fit',
			                items: {
								                    xtype: 'htmleditor',
								                    name: 'bio2',
								                    fieldLabel: 'Mensaje'
								                }
			            }]
			        }],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });



   var panelEspecialista =  Ext.create('Ext.Viewport', {
            layout:'border',
            items:[{
                region:'west',
                id:'west-panel',
                split:true,
                width: 400,
                minSize: 175,
                maxSize: 399,
                collapsible: true,
                margins:'5 0 5 5',
                cmargins:'5 5 5 5',
                layoutConfig:{
                    animate:true
                },
                items: [{	
                    autoScroll:true,
                    border:false,
                    iconCls:'nav',
                    items:[panelRitmoCardiaco]
                }]
            },{
                region:'north',
                margins:'-5 5 5 0',
                layout:'column',
                autoScroll:true,
                defaults: {
                    layout: 'anchor',
                    defaults: {
                        anchor: '100%'
                    }
                },
                items: [{
                    columnWidth: 1,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px 0 5px 5px',
                    items:[panelBuscarPaciente]
                },]
            },{
                region:'center',
                margins:'5 5 5 0',
                layout:'column',
                autoScroll:true,
                defaults: {
                    layout: 'anchor',
                    defaults: {
                        anchor: '100%'
                    }
                },
                items: [{
                    columnWidth: 1,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px 0 5px 5px',
                    items:[datosPaciente]
                },]
            }]
        });
            panelEspecialista.render(document.body);

 //   datosPaciente.render(document.body);
});




